<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表情符号战争游戏</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

        .container {
            max-width: 900px;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            border: 2px solid #e94560;
            box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ff6b6b, #ffd166, #06d6a0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
        }

        .game-stats {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
        }

        .player, .enemy {
            background: rgba(30, 30, 46, 0.7);
            border-radius: 15px;
            padding: 20px;
            width: 100%;
            border: 2px solid;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .player {
            border-color: #06d6a0;
        }

        .enemy {
            border-color: #ff6b6b;
        }

        .health-container {
            margin: 15px 0;
        }

        .health-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .health-bar {
            height: 30px;
            background: #333;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        }

        .health-fill {
            height: 100%;
            transition: width 0.5s ease-in-out;
        }

        .player .health-fill {
            background: linear-gradient(to right, #06d6a0, #0acd8f);
            width: 100%;
        }

        .enemy .health-fill {
            background: linear-gradient(to right, #ff6b6b, #ff5252);
            width: 100%;
        }

        .health-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        .emoji-display {
            font-size: 5rem;
            text-align: center;
            margin: 20px 0;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin: 30px 0;
        }

        .control-btn {
            background: rgba(30, 30, 46, 0.8);
            border: none;
            border-radius: 50%;
            width: 90px;
            height: 90px;
            font-size: 3.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .attack-btn {
            background: linear-gradient(135deg, #ff6b6b, #e94560);
        }

        .defense-btn {
            background: linear-gradient(135deg, #06d6a0, #118ab2);
        }

        .control-btn:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }

        .control-btn:active {
            transform: translateY(0) scale(0.95);
        }

        .defense-active {
            box-shadow: 0 0 20px 5px #06d6a0;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 10px 3px #06d6a0; }
            50% { box-shadow: 0 0 20px 8px #06d6a0; }
            100% { box-shadow: 0 0 10px 3px #06d6a0; }
        }

        .battle-log {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 20px;
            height: 200px;
            overflow-y: auto;
            margin-top: 20px;
            border: 1px solid #444;
        }

        .battle-log h3 {
            margin-bottom: 15px;
            color: #ffd166;
            text-align: center;
        }

        .log-entry {
            padding: 8px;
            border-bottom: 1px solid #333;
            animation: fadeIn 0.5s;
        }

        .player-log {
            color: #06d6a0;
        }

        .enemy-log {
            color: #ff6b6b;
        }

        .defense-log {
            color: #118ab2;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .game-status {
            text-align: center;
            font-size: 1.5rem;
            margin: 20px 0;
            min-height: 40px;
            font-weight: bold;
            color: #ffd166;
            text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
        }

        .restart-btn {
            background: linear-gradient(135deg, #ffd166, #ffb703);
            border: none;
            border-radius: 50px;
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #1a1a2e;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .instructions {
            background: rgba(30, 30, 46, 0.7);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            border: 1px solid #444;
        }

        .instructions h3 {
            color: #ffd166;
            margin-bottom: 15px;
            text-align: center;
        }

        .instructions ul {
            padding-left: 20px;
        }

        .instructions li {
            margin-bottom: 10px;
            line-height: 1.5;
        }

        /* 攻击动画效果 */
        @keyframes attackAnimation {
            0% { transform: translateX(0) scale(1); }
            50% { transform: translateX(20px) scale(1.2); }
            100% { transform: translateX(0) scale(1); }
        }

        .attack-animation {
            animation: attackAnimation 0.3s ease-out;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .game-stats {
                flex-direction: column;
            }

            .controls {
                gap: 15px;
            }

            .control-btn {
                width: 70px;
                height: 70px;
                font-size: 2.5rem;
            }

            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>😠 表情符号战争 🤖</h1>
        <p>点击😠攻击敌人，激活🤖自动防御，保护你的血量！</p>
    </header>

    <div class="game-stats">
        <div class="player">
            <h2>玩家</h2>
            <div class="health-container">
                <div class="health-label">
                    <span>血量:</span>
                    <span id="player-health-text">100/100</span>
                </div>
                <div class="health-bar">
                    <div id="player-health" class="health-fill"></div>
                    <div class="health-text" id="player-health-percent">100%</div>
                </div>
            </div>
            <div class="emoji-display">😊</div>
        </div>

        <div class="enemy">
            <h2>敌人</h2>
            <div class="health-container">
                <div class="health-label">
                    <span>血量:</span>
                    <span id="enemy-health-text">100/100</span>
                </div>
                <div class="health-bar">
                    <div id="enemy-health" class="health-fill"></div>
                    <div class="health-text" id="enemy-health-percent">100%</div>
                </div>
            </div>
            <div class="emoji-display">👿</div>
        </div>
    </div>

    <div class="game-status" id="game-status">战斗开始！点击😠发动攻击</div>

    <div class="controls">
        <button id="attack-btn" class="control-btn attack-btn">😠</button>
        <button id="defense-btn" class="control-btn defense-btn">🤖</button>
    </div>

    <div class="battle-log">
        <h3>战斗日志</h3>
        <div id="log-container"></div>
    </div>

    <button id="restart-btn" class="restart-btn">重新开始游戏</button>

    <div class="instructions">
        <h3>游戏说明</h3>
        <ul>
            <li>点击<span class="defense-log">😠 攻击按钮</span>对敌人造成伤害</li>
            <li>每次攻击后敌人会进行反击</li>
            <li>激活<span class="defense-log">🤖 防御按钮</span>可减少受到的伤害</li>
            <li>防御状态会持续消耗少量能量</li>
            <li>当一方血量降至0时游戏结束</li>
            <li>使用进度条实时监控双方血量变化</li>
        </ul>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // 游戏状态变量
        const gameState = {
            playerHealth: 100,
            enemyHealth: 100,
            defenseActive: false,
            gameOver: false,
            defenseEnergy: 100
        };

        // DOM元素引用
        const playerHealthBar = document.getElementById('player-health');
        const enemyHealthBar = document.getElementById('enemy-health');
        const playerHealthText = document.getElementById('player-health-text');
        const enemyHealthText = document.getElementById('enemy-health-text');
        const playerHealthPercent = document.getElementById('player-health-percent');
        const enemyHealthPercent = document.getElementById('enemy-health-percent');
        const attackBtn = document.getElementById('attack-btn');
        const defenseBtn = document.getElementById('defense-btn');
        const restartBtn = document.getElementById('restart-btn');
        const logContainer = document.getElementById('log-container');
        const gameStatus = document.getElementById('game-status');

        // 初始化游戏
        function initGame() {
            gameState.playerHealth = 100;
            gameState.enemyHealth = 100;
            gameState.defenseActive = false;
            gameState.gameOver = false;
            gameState.defenseEnergy = 100;

            updateHealthBars();
            defenseBtn.classList.remove('defense-active');
            logContainer.innerHTML = '';
            gameStatus.textContent = '战斗开始！点击😠发动攻击';
            addLogEntry('游戏开始！准备战斗！', 'defense-log');
        }

        // 更新血条显示
        function updateHealthBars() {
            playerHealthBar.style.width = `${gameState.playerHealth}%`;
            enemyHealthBar.style.width = `${gameState.enemyHealth}%`;
            playerHealthText.textContent = `${Math.max(0, gameState.playerHealth)}/100`;
            enemyHealthText.textContent = `${Math.max(0, gameState.enemyHealth)}/100`;
            playerHealthPercent.textContent = `${Math.max(0, gameState.playerHealth)}%`;
            enemyHealthPercent.textContent = `${Math.max(0, gameState.enemyHealth)}%`;
        }

        // 添加日志条目
        function addLogEntry(text, className = '') {
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${className}`;
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
            logContainer.prepend(logEntry);

            // 自动滚动到最新日志
            logContainer.scrollTop = 0;
        }

        // 玩家攻击
        function playerAttack() {
            if (gameState.gameOver) return;

            // 添加攻击动画效果
            attackBtn.classList.add('attack-animation');
            setTimeout(() => {
                attackBtn.classList.remove('attack-animation');
            }, 300);

            // 计算玩家伤害 (15-25)
            const damage = Math.floor(Math.random() * 11) + 15;
            gameState.enemyHealth = Math.max(0, gameState.enemyHealth - damage);

            addLogEntry(`玩家发动攻击，对敌人造成 ${damage} 点伤害！`, 'player-log');
            updateHealthBars();

            // 检查敌人是否被击败
            if (gameState.enemyHealth <= 0) {
                gameState.enemyHealth = 0;
                endGame('玩家');
                return;
            }

            // 敌人反击
            setTimeout(enemyCounterAttack, 700);
        }

        // 敌人反击
        function enemyCounterAttack() {
            if (gameState.gameOver) return;

            // 计算敌人伤害 (10-20)
            let damage = Math.floor(Math.random() * 11) + 10;

            // 如果防御激活，减少伤害
            if (gameState.defenseActive) {
                const originalDamage = damage;
                damage = Math.max(1, Math.floor(damage * 0.4)); // 减少60%伤害

                // 防御能量消耗
                gameState.defenseEnergy = Math.max(0, gameState.defenseEnergy - 5);
                addLogEntry(`自动防御生效！减少 ${originalDamage - damage} 点伤害，当前防御能量: ${gameState.defenseEnergy}%`, 'defense-log');

                // 检查防御能量
                if (gameState.defenseEnergy <= 0) {
                    gameState.defenseActive = false;
                    defenseBtn.classList.remove('defense-active');
                    addLogEntry('防御能量耗尽！自动防御系统关闭！', 'defense-log');
                    gameStatus.textContent = '防御能量耗尽！';
                }
            }

            gameState.playerHealth = Math.max(0, gameState.playerHealth - damage);

            addLogEntry(`敌人反击，对玩家造成 ${damage} 点伤害！`, 'enemy-log');
            updateHealthBars();

            // 检查玩家是否被击败
            if (gameState.playerHealth <= 0) {
                gameState.playerHealth = 0;
                endGame('敌人');
            }
        }

        // 切换防御状态
        function toggleDefense() {
            if (gameState.gameOver) return;

            gameState.defenseActive = !gameState.defenseActive;

            if (gameState.defenseActive && gameState.defenseEnergy > 0) {
                defenseBtn.classList.add('defense-active');
                addLogEntry('自动防御已激活！', 'defense-log');
                gameStatus.textContent = '防御系统启动中...';
            } else {
                defenseBtn.classList.remove('defense-active');
                addLogEntry('自动防御已关闭！', 'defense-log');
                gameStatus.textContent = '防御系统已关闭';
            }
        }

        // 结束游戏
        function endGame(winner) {
            gameState.gameOver = true;
            const message = `${winner} 获得了胜利！`;
            gameStatus.textContent = message;
            addLogEntry(message, winner === '玩家' ? 'player-log' : 'enemy-log');

            if (winner === '玩家') {
                gameStatus.style.color = '#06d6a0';
                gameStatus.style.textShadow = '0 0 10px rgba(6, 214, 160, 0.7)';
            } else {
                gameStatus.style.color = '#ff6b6b';
                gameStatus.style.textShadow = '0 0 10px rgba(255, 107, 107, 0.7)';
            }
        }

        // 事件监听
        attackBtn.addEventListener('click', playerAttack);
        defenseBtn.addEventListener('click', toggleDefense);
        restartBtn.addEventListener('click', initGame);

        // 初始化游戏
        initGame();
    });
</script>
</body>
</html>